<template>
    <div class="teacher_main_box_css">
      <div class="techer_admin_box_css" v-for="i in arr" :key="i.id">
          <div class="teacher_content_box_css">
              <div class="teacher_left_box_css">
                  <div class="teacher_image_box_css">
                      <img :src="i.teacher_image" style="width: 15vw;height: 40vh;" />
                  </div>
              </div>
              <div class="teacher_right_box_css">
                  <div class="teacher_information_box_css">
                      <div class="teacher_information_left_box_css">
                          <b style="font-size: 1.6vw;line-height: 3rem;">{{ i.teacher_name }}</b>
                      </div>
                      <div class="teacher_information_right_box_css">
                          <b style="font-size: 1.2vw;line-height: 3rem;">{{ i.teacher_information }}</b>
                      </div>
                  </div>
                  <div class="teacher_introduce_box_css">
                      <div class="teacher_introduce_left_box_css">
                          <b style="font-size: 1.6vw;">简&emsp;介:</b>
                      </div>
                      <div class="teacher_introduce_right_box_css">
                          <!-- <a> -->
                          {{ i.teacher_introduce }}
                          <!-- </a> -->
                      </div>
                  </div>
                  <div class="teacher_characteristic_box_css">
                      <div class="teacher_characteristic_left_box_css">
                          <b style="font-size: 1.6vw;">特&emsp;点:</b>
                      </div>
                      <div class="teacher_characteristic_right_box_css">
                          <a class="label" v-for="(j,index) in i.teacher_characteristic" :key="index">{{ j }}</a>
                      </div>
                  </div>
                  <div class="teacher_style_box_css">
                      <div class="teacher_style_left_box_css">
                          <b style="font-size: 1.6vw;line-height: 2.3rem;">风&emsp;格:</b>
                      </div>
                      <div class="teacher_style_right_box_css">
                          <a style="line-height: 2.5rem;">
                              {{ i.teacher_style }}
                          </a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <br>
      <div></div>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
      export default {
          name:'teacher',
          data(){
              return{
                  cs:[],
                  arr:[],
              }
          },
          mounted(){
              var that=this
              axios.get('api/Teacher')
              .then(function(res){
                  for(var i=0;i<res.data.length;i++){
                      that.arr.push({
                          teacher_id:res.data[i].id,
                          teacher_image:res.data[i].teacherImage,
                          teacher_name:res.data[i].teacherName,
                          teacher_information:res.data[i].teacherInformation,
                          teacher_introduce:res.data[i].teacherIntroduce,
                          teacher_characteristic:res.data[i].teacherCharacteristic.split('、'),
                          teacher_style:res.data[i].teacherStyle
                      })
                  }
                  
              })
              .catch(function(error){
                 
              })
          }
      }
  </script>
  
  <style>
      .teacher_content_box_css{
          width: 80vw;
          height: 50vh;
          margin-left: 11vw;
          margin-top: 2vh;
          border: 1px solid #ccc;
          
      }
      .teacher_left_box_css{
          width: 30%;
          height: 100%;
          float: left;
      }
      .teacher_image_box_css{
          width: 80%;
          height: 90%;
          margin-top: 2.5vh;
          margin-left: 2.7vw;
      }
      .teacher_right_box_css{
          width: 65%;
          height: 100%;
          float: left;
      }
      .teacher_information_box_css{
          width: 100%;
          height: 10%;
      }
      .teacher_information_left_box_css{
          width: 12%;
          height: 100%;
          margin-top: 2vh;
          float: left;
      }
      .teacher_information_right_box_css{
          width: 75%;
          height: 100%;
          margin-top: 2vh;
          float: left;
          margin-left: 1vw;
      }
      .teacher_introduce_box_css{
          width: 100%;
          height: 50%;
          margin-top: 2vh;
      }
      .teacher_introduce_left_box_css{
          width: 12%;
          height: 100%;
          margin-top: 2vh;
          float: left;
      }
      .teacher_introduce_right_box_css{
          width: 75%;
          height: 100%;
          margin-top: 2vh;
          float: left;
          margin-left: 1vw;
      }
      .teacher_characteristic_box_css{
          width: 100%;
          height: 10%;
          margin-top: 2vh;
      }
      .teacher_characteristic_left_box_css{
          width: 11%;
          height: 100%;
          margin-top: 2vh;
          float: left;
      }
      .teacher_characteristic_right_box_css{
          width: 75%;
          height: 100%;
          margin-top: 2vh;
          float: left;
          margin-left: 0.5vw;
      }
      .teacher_style_box_css{
          width: 100%;
          height: 10%;
          margin-top: 2vh;
      }
      .teacher_style_left_box_css{
          width: 14%;
          height: 100%;
          margin-top: 2vh;
          float: left;
      }
      .teacher_style_right_box_css{
          width: 75%;
          height: 100%;
          margin-top: 2vh;
          float: left;
          margin-left: 0.2vw;
      }
      .label{
          display: inline-block;
          margin: 0 5px;
          background: #157664;
          border-radius: 20px;
          padding: 3px 20px;
          color: #fff;
          cursor: default;
          margin-top: 0.7vh;
      }
  </style>